<script setup lang="ts">
// 测试自动导入功能
// 以下API应该可以自动导入，无需手动import

// Vue相关API

const count = ref<number>(0)
const doubled = computed(() => count.value * 2)

// Pinia store
const languageStore = useLanguageStore()
const currencyStore = useCurrencyStore()

// 工具函数
const timestamp = Tool.getTimestamp()
const formattedMoney = Tool.formatMoney(123456)

// API调用
const testApi = async () => {
	try {
		const result = await Api.post('/test/endpoint', { test: 'data' })
		console.log('API result:', result)
	} catch (error) {
		console.error('API error:', error)
	}
}

// 通知功能
const showNotification = () => {
	Api.notify(t('通知.自动导入测试'))
}

// 权限检查
const hasPermission = Api.hasPermission('test.permission')

// 响应式数据
const state = reactive({
	message: '自动导入测试成功',
	items: ['item1', 'item2', 'item3']
})

// 监听器
watch(count, (newVal: number, oldVal: number) => {
	console.log(`count changed from ${oldVal} to ${newVal}`)
})

// 生命周期
onMounted(() => {
	console.log('组件已挂载')
})
</script>

<template>
	<IsGuest>
		<div class="p-4">
			<h1 class="text-2xl font-bold mb-4">自动导入功能测试</h1>

			<div class="space-y-4">
				<!-- 基础功能测试 -->
				<div class="p-4 border rounded">
					<h2 class="text-lg font-semibold mb-2">基础功能测试</h2>
					<p>当前计数: {{ count }}</p>
					<p>双倍计数: {{ doubled }}</p>
					<p>时间戳: {{ timestamp }}</p>
					<p>格式化金额: {{ formattedMoney }}</p>
					<p>权限检查: {{ hasPermission ? '有权限' : '无权限' }}</p>
					<button @click="count++" class="px-4 py-2 bg-blue-500 text-white rounded">
						增加计数
					</button>
				</div>

				<!-- API测试 -->
				<div class="p-4 border rounded">
					<h2 class="text-lg font-semibold mb-2">API测试</h2>
					<button @click="testApi" class="px-4 py-2 bg-green-500 text-white rounded mr-2">
						测试API调用
					</button>
					<button
						@click="showNotification"
						class="px-4 py-2 bg-purple-500 text-white rounded">
						显示通知
					</button>
				</div>

				<!-- 状态管理测试 -->
				<div class="p-4 border rounded">
					<h2 class="text-lg font-semibold mb-2">状态管理测试</h2>
					<p>当前语言: {{ languageStore.currentLanguage }}</p>
					<p>当前货币: {{ currencyStore.currentCurrency }}</p>
					<p>响应式消息: {{ state.message }}</p>
					<ul>
						<li v-for="item in state.items" :key="item">{{ item }}</li>
					</ul>
				</div>
			</div>
		</div>
	</IsGuest>
</template>

<style scoped>
/* 样式可以正常使用 */
</style>
